<template>
  <el-button type="text" @click="outerVisible = true">
    {{ name }}
  </el-button>

  <el-dialog
    v-model="outerVisible"
    v-if="outerVisible"
    destroy-on-close
    ref="reff"
  >
    <template v-slot:title>
      <slot name="title">
        <dialog-title :dialogTitleConfig="dialogTitleConfig"></dialog-title>
      </slot>
    </template>

    <template #default>
      <slot ref="middleRef"></slot>
    </template>
    <template #footer>
      <slot name="footer">
        <dialog-footer
          @confirm="confirm"
          @cancel="cancel"
          :middleRef="middleRef"
        ></dialog-footer>
      </slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from "vue"
import DialogTitle from "./title.vue"
import DialogFooter from "./footer.vue"
import { ElDialog } from "element-plus"
const emit = defineEmits(["dialogConfirm"])
const props = defineProps({
  name: {
    type: String,
    default: "dialog"
  },
  dialogTitleConfig: {
    type: Object,
    default: () => ({})
  }
})

const outerVisible = ref(false)
const middleRef = ref(null)
const cancel = () => (outerVisible.value = false)

const confirm = () => {
  outerVisible.value = false
  emit("dialogConfirm")
}
</script>
